<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .banner {
        width: 730px;
        height: 454px;
        margin: 100px auto;
        background: red;
        position: relative;
        overflow: hidden;
    }

    .imgs {
        width: 730px;
        height: 454px;
        background: #5EFF5E;
    }

    .circle {
        width: 140px;
        height: 20px;
        position: absolute;
        left: 50%;
        margin-left: -70px;
        bottom: 20px;
    }

    ul {
        list-style: none;
        /* width: 200px;
         height: 100px;
         background: black;*/
    }

    .imgs ul li {
        float: left;
    }

    .circle ul li {
        float: left;
        margin-left: 3px;
        width: 20px;
        height: 20px;
        background: #5EFF5E;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        border-radius: 10px;
    }

</style>
<script>
    window.onload = function () {
        let imgs = document.getElementsByClassName("imgs")[0].getElementsByTagName("img");
        let ulEle = document.createElement("ul");
        document.getElementsByClassName("circle")[0].appendChild(ulEle);
        let ull = document.getElementsByClassName("circle")[0].getElementsByTagName("ul")[0];
        // alert(ull);

        for (let i = 0; i < imgs.length; i++) {
            let lii = document.createElement("li");
            lii.innerHTML = i + 1;
            ull.appendChild(lii);
        }

    };
</script>
<body>
<div class="banner">
    <div class="imgs">
        <ul>
            <li>
                <img src="images/11.jpg"/>
            </li>
            <li>
                <img src="images/22.jpg"/>
            </li>
            <li>
                <img src="images/33.jpg"/>
            </li>
            <li>
                <img src="images/44.jpg"/>
            </li>
            <li>
                <img src="images/55.jpg"/>
            </li>
            <li>
                <img src="images/66.jpg"/>
            </li>
        </ul>
    </div>
    <div class="circle">
        <!--     <ul>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>
                 <li>6</li>
             </ul>-->
    </div>
</div>


</body>
</html>